<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
    <title>Document</title>
    <style>
      h2,
      p {
        margin: 0;
      }
      .box {
        margin: 30px auto;
        width: 300px;
      }
      #user,
      #message {
        box-sizing: border-box;
        width: 300px;
        border: 1px solid #000;
        padding: 10px;
        height: 100px;
        resize: none;
        display: block;
      }
      #user {
        padding: 0 10px;
        height: 30px;
        margin-bottom: 10px;
      }
      #btn {
        display: block;
        margin: 10px auto;
        width: 60%;
        height: 40px;
      }
      #list {
        border-top: 1px solid #000;
        padding: 10px 0 0;
        margin: 0;
        list-style: none;
      }
      #list li {
        position: relative;
        font: 14px/30px "宋体";
        border-bottom: 1px solid #000;
        padding: 0 15px;
        overflow: hidden;
      }
      .clos {
        position: absolute;
        right: 5px;
        top: 10px;
      }
      .clos2 {
        position: absolute;
        right: 5px;
        top: 30px;
      }
      /* .replay{
    position:absolute;
    right: 5px;
    top: 35px;
} */
      .mask {
        width: 100vw;
        height: 100vh;
        background: black;
        opacity: 0.3;
        position: absolute;
        left: 0;
        top: 0;
        display: none;
      }
      .comfirm {
        width: 200px;
        height: 120px;
        background: white;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 30%;
        border-radius: 5px;
        transform: translate(-50%, -50%);
        overflow: hidden;
        display: none;
      }
      .comfirm button {
        /* position: absolute; */
        /* right: 10px; */
        float: right;
        margin-top: 20px;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <input type="text" id="user" value="小明" />
      <textarea id="message">我就是传说中的无敌小明</textarea>
      <button id="btn">提交留言</button>
      <ul id="list">
        <li style="height: auto">
          <h2 class="user">小王说:</h2>
          <p>呼叫无敌小明</p>

          <a href="javascript:;" class="clos">删除</a>
          <a href="javascript:;" class="clos2">回复</a>
        </li>
        <li style="height: auto">
          <h2 class="user">老师说:</h2>
          <p>小明滚出去</p>
          <p>回复的内容</p>
          <a href="javascript:;" class="clos">删除</a>
        </li>
      </ul>
    </div>
    <script>
      let btn = document.querySelector("#btn");
      let usernameEle = document.querySelector("#user");
      let messageEle = document.querySelector("#message");
      let listEle = document.querySelector("#list");
      listEle.innerHTML = "";
      btn.onclick = function () {
        let username = usernameEle.value;
        let message = messageEle.value;
        $.get(
          "/adddata",
          { username, message },
          function (res) {
            refresh();
          },
          "json"
        );
      };
      refresh();
      function refresh() {
        $.get("/refresh", function (res) {
          let { data } = res;
          renderDom(data);
        });
      }
      // (async function () {})();
      function renderDom(data) {
        listEle.innerHTML = "";
        data.forEach((item) => {
          let liEle = document.createElement("li");
          liEle.style.height = "auto";
          liEle.innerHTML = `<h2 class="user">${item.username}说:</h2>
                                  <p>${item.message}</p>
                                  <a href="javascript:;" class="clos" myid="${item._id}">删除</a>
                                  <a href="javascript:;" class="clos2">回复</a>
                                  <p style="display:none" ><input /> <button class="sure">确定</button><button class="cancel">取消</button></p>
                                  <div class="mybox"></div>
                                  `;
          newData();
          let delEle = liEle.querySelector(".clos");
          let boxEle = liEle.querySelector(".mybox");
          delEle.onclick = function (e) {
            let target = e.target;
            let _id = target.getAttribute("myid");
            $.get(
              "/deldata",
              { _id },
              function (res) {
                refresh();
              },
              "json"
            );
          };

          let replayELe = liEle.querySelector(".clos2");
          replayELe.onclick = function () {
            this.nextElementSibling.style.display = "block";
            this.nextElementSibling.querySelector(".cancel").onclick =
              function () {
                this.parentNode.style.display = "none";
              };

            this.nextElementSibling.querySelector(".sure").onclick =
              async function () {
                let parent_id = delEle.getAttribute("myid");
                let val = this.previousElementSibling.value;

                $.get("/unddata", { val, parent_id }, newData(), "json");

                this.parentNode.style.display = "none";
              };
          };
          listEle.appendChild(liEle);
        });
      }

      async function newData() {
        let boxEles = document.querySelectorAll(".mybox");
        boxEles.forEach((ins) => {
          ins.innerHTML = "";
          let delEles = document.querySelectorAll(".clos");
          delEles.forEach((item) => {
            $.get("/newdata", (res) => {
              let { data } = res;
              data.forEach((index) => {
                let pEle = document.createElement("p");
                let _id = item.getAttribute("myid");
                if (_id == index.parent_id) {
                  pEle.innerHTML = index.val;
                  ins.appendChild(pEle);
                }
              });
            });
          });
        });
      }
    </script>
  </body>
</html>
